<template>
  <div>
    <div class="yzhou">
      <div class="list">
        <p>高</p>
        <p>（7.5分以上）</p>
      </div>
      <div class="list">a</div>
      <div class="list">a</div>
    </div>
    <table>
      <tr>
        <td class="td0">
          <p v-for="o in tableData[0].value" :key="o">{{o}}</p>
        </td>
        <td class="td1">a</td>
        <td class="td2">c</td>
      </tr>
      <tr>
        <td class="td3">b</td>
        <td class="td4">b</td>
        <td class="td5">b</td>
      </tr>
      <tr>
        <td class="td6">c</td>
        <td class="td7">c</td>
        <td class="td8">c</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      default () {
        return [
          {
            value: []
          }
        ]
      }
    },
    width: {
      type: String
    },
    height: {
      type: String
    }
  }
}
</script>

<style lang="scss">
.yzhou{
  float: left;
  width: 100px;
  height: 100%;
  border-right: 5px solid #7F7F7F;
  .list{
    height: 100px;
  }
}
table{
  width: 300px;
  height: 100%;
}
table tr{
    td{
      width: 100px;
      height: 100px;
    }
    .td0{
      background: #FEFE4C;
    }
}
.td1{
  background: #D7D7D7;
}
.td2{
  background: #4CC8F4;
}
.td3{
  background: #FED34C;
}
.td4{
  background: #FEFE4C;
}
.td5{
  background: #C0C0C0;
}
.td6{
  background: #DA4C4C;
}
.td7{
  background: #FED34C;
}
.td8{
  background: #FEFE4C;
}
</style>
